<template>
  <nut-dialog
    v-model:visible="visible"
    :id="id"
    :title="title"
    :content="content"
    :teleportTo="teleportTo"
    :closeOnClickOverlay="closeOnClickOverlay"
    :noFooter="noFooter"
    :noOkBtn="noOkBtn"
    :noCancelBtn="noCancelBtn"
    :cancelText="cancelText"
    :okText="okText"
    :cancelAutoClose="cancelAutoClose"
    :okAutoClose="okAutoClose"
    :textAlign="textAlign"
    :closeOnPopstate="closeOnPopstate"
    :lockScroll="lockScroll"
    :footerDirection="footerDirection"
    :overlayClass="overlayClass"
    :overlayStyle="overlayStyle"
    :popClass="popClass"
    :popStyle="popStyle"
    :customClass="`su-dialog ${customClass}`"
    :beforeClose="beforeClose"
    v-on="onEvents"
  >
    <template v-for="slot in Object.keys($slots)" #[slot]="scope">
      <slot v-bind="scope" :name="slot" />
    </template>
  </nut-dialog>
</template>

<script setup>
import { useVModel } from '@vueuse/core';
import { uniqueId } from 'lodash-es';
import { invokeBy } from '@/supreme/core';
defineOptions({
  name: 'SuDialog'
});

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  content: {
    type: [String, Object], // 支持字符串或VNode
    default: ''
  },
  teleport: {
    type: String,
    default: 'body'
  },
  closeOnClickOverlay: {
    type: Boolean,
    default: true
  },
  noFooter: {
    type: Boolean,
    default: false
  },
  noOkBtn: {
    type: Boolean,
    default: false
  },
  noCancelBtn: {
    type: Boolean,
    default: false
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  okText: {
    type: String,
    default: '确 定'
  },
  cancelAutoClose: {
    type: Boolean,
    default: true
  },
  okAutoClose: {
    type: Boolean,
    default: false
  },
  textAlign: {
    type: String,
    default: 'center'
  },
  closeOnPopstate: {
    type: Boolean,
    default: false
  },
  lockScroll: {
    type: Boolean,
    default: true
  },
  footerDirection: {
    type: String,
    default: 'horizontal'
  },
  overlayClass: {
    type: String,
    default: ''
  },
  overlayStyle: {
    type: Object, // CSSProperties 类型
    default: () => ({})
  },
  popClass: {
    type: String,
    default: ''
  },
  popStyle: {
    type: Object, // CSSProperties 类型
    default: () => ({})
  },
  customClass: {
    type: String,
    default: ''
  },
  beforeClose: {
    type: Function,
    default: undefined
  },
  ok: {
    type: Function,
    default: undefined
  },
  cancel: {
    type: Function,
    default: undefined
  }
});
const emit = defineEmits(['update:modelValue']);
const id = ref(uniqueId());
const loading = ref(false);
const visible = useVModel(props, 'modelValue', emit);
const onEvents = computed(() => {
  return {
    ok: onOk,
    cancel: onCancel
  };
});
function close() {
  visible.value = false;
}
function onOk() {
  const { ok } = props;
  loading.value = true;
  invokeBy(ok, {
    args: { close },
    done: () => {
      close();
      loading.value = false;
    }
  });
}
function onCancel() {
  const { cancel } = props;
  loading.value = true;
  invokeBy(cancel, {
    args: { close },
    done: () => {
      close();
      loading.value = false;
    }
  });
}
</script>

<style lang="scss">
.su-dialog {
  @include wh(80vw, 100%);
  .nut-dialog__content {
    max-height: 60vh;
  }
}
</style>
